<script setup>
import BackButton from "@/components/BackButton.vue";
import {ref, getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance()
import { facInfoByName, cleanByType,cleanByProvince } from '@/scripts/api';
import { useRouter } from 'vue-router'
const router = useRouter()
const {facName} = router.currentRoute.value.query
const route = proxy.$route
const { meta, path } = route
meta.title=`${meta.title} - ${facName}`
const fac = ref({})
const tableData = ref([])
const regionTableData = ref([])
await facInfoByName(facName).then(res=>{
  fac.value = res.data || {}
})
const typeRes = await cleanByType(facName);
tableData.value = typeRes.data

const provinceRes = await cleanByProvince(facName);
regionTableData.value = provinceRes.data
const tabName = ref('type')

const sum = (data, field) =>{
  if(!data.length) return '--';
  return data.map(i=>i[field]).reduce((p,n)=>parseInt(p)+parseInt(n))  || '--'
}
const totalRow = (data)=>{
  return {
    type:'总计',
    province:'总计',
    rawAll: sum(data,'rawAll'),
    rawVar: sum(data,'rawVar'),
    marketAll: sum(data,'marketAll'),
    marketVar: sum(data,'marketVar'),
    ascAll: sum(data,'ascAll'),
    ascDay: sum(data,'ascDay')
  }
}
if(tableData.value.length){
  tableData.value.unshift(totalRow(tableData.value))
}
if(regionTableData.value.length){
  regionTableData.value.unshift(totalRow(regionTableData.value))
}
</script>

<template>
  <main style="padding: 20px">
    <el-descriptions size="large" :column="2" border>
      <template #title>
        <div style="display: flex;align-items: baseline;">
          <span style="font-size: 26px">{{ facName }}</span>
          <el-tag style="margin-left: 20px" type="success">清洗型</el-tag>
        </div>
      </template>
      <template #extra>
        <back-button/>
      </template>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">总量</span>
        </template>
        <span style="font-size: 20px">{{ tableData[0].marketAll }} 家</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">更新时间</span>
        </template>
        <span style="font-size: 20px">{{ fac.dateStr || '' }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">版本周期</span>
        </template>
        <span style="font-size: 20px">月</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider style="margin: 30px 0"/>
    <el-tabs type="border-card" v-model="tabName">
      <el-tab-pane label="性质统计" name="type">
        <el-table :data="tableData" style="width: 100%" size="large">
          <el-table-column width="250">
            <template #default="scope">
              <span class="header">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">别称总量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.rawAll }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">别称变化量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.rawVar }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">市场总量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.marketAll }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">市场变化量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.marketVar }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="区域统计" name="province">
        <el-table :data="regionTableData" style="width: 100%" size="large">
          <el-table-column width="250">
            <template #default="scope">
              <span class="header">{{ scope.row.province }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">别称总量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.rawAll }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">别称变化量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.rawVar }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">市场总量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.marketAll }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">市场变化量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.marketVar }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </main>
</template>
<style scoped>
::v-deep(.el-descriptions__header){
  height: 50px;
}
.header{
  font-size: 18px;
}
.content{
  font-size: 24px;
}
</style>
